<template>
  <div>
    <div :id="id"></div>
  </div>
</template>

<script>
// @ is an alias to /src
import { qrcanvas } from "qrcanvas";
import { onMounted, nextTick, reactive } from "vue";
export default {
  name: "QrCode",
  components: {},
  props: {
    str: String,
    id: String
  },
  setup(props) {
    // const deiveceWidth = document.documentElement.clientWidth;
    const state = reactive({
      imgurl: ""
    });
    const getQrcode = () => {
      nextTick(() => {
        let canvas = qrcanvas({
          data: props.str,
          size: 150
        });
        state.imgurl = canvas.toDataURL("image/png");
        let imgNode = document.createElement("img");
        imgNode.src = state.imgurl;
        document.getElementById(props.id).innerHTML = "";
        document.getElementById(props.id).appendChild(imgNode);
      });
    };
    onMounted(() => {
      getQrcode();
    });
    return {
      state,
      getQrcode
    };
  }
};
</script>
<style lang="less" scoped></style>
